<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>待支付页面</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>
订单号：<span id="orderNo"></span></br>
价格：<span id="amount"></span></br>
<button id="pay">支付</button></br>
<span id="time" style="color:red"></span>
</body>
<script type="text/javascript">
    $(function (){
        var second = 10;
        var id = getUrlParam("id");
        $.get("/order/"+id,function (repo){
            if(repo.flag==true){
                second = 10;
                $('#orderNo').html(repo.obj.orderNo);
                $('#amount').html(repo.obj.amount);
                $("#time").html("订单支付剩余事件"+second + "s");
                //设置1s的定时器，显示倒计时
                setTimeout(countdown, 1000);
            }
        })
        
        $("#pay").click(function () {
            $.get("/order/pay/"+id,function (repo) {
                var data = repo.obj;
                if(repo.flag==true){
                    window.location.href="/order_pay_success.html?orderNo="+data.orderNo+"&amount="+data.amount;
                }else{
                    window.location.href="/order_pay_fail.html?orderNo="+data.orderNo+"&amount="+data.amount+"&msg="+repo.msg;
                }
            })
        })


        function countdown() {
            second = second - 1;
            if (second == 0) {
                $("#time").html("订单支付已经超时");
            } else {
                $("#time").html("订单支付剩余事件"+second + "s");
                setTimeout(countdown, 1000);
            }
        }
        
    })

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return decodeURI(r[2]); return null; //返回参数值
    }

</script>
</html>